<template>
	<Form :model="drawer" ref="validForm" :rules="ruleValidate">
		<FormItem label="菜单名" label-position="top" prop="menus">
			<Select v-model="drawer.menus" placeholder="请选择所属菜单" multiple>
				<Option v-for="item in menuList" :value="item.id" :key="item.id">{{ item.name }}</Option>
			</Select>
		</FormItem>

		<FormItem label="功能名" label-position="top" prop="funcName">
			<Input v-model="drawer.funcName" placeholder="请输入功能名称" />
		</FormItem>

		<FormItem label="排序" label-position="top" prop="sorted">
			<InputNumber v-model="drawer.sorted" placeholder="" />
			<b style="padding: 0 5px">请输入排序的数字,数字越大,优先级越低</b>
		</FormItem>

		<FormItem label="路由地址" label-position="top" prop="url">
			<Input v-model="drawer.url" placeholder="请输入路由地址,以`/`开头" />
		</FormItem>

		<FormItem label="权限标识" label-position="top" prop="remark">
			<Input v-model="drawer.remark" placeholder="请输入权限标识,多个单词以英文冒号分割,例如 menu:list" />
		</FormItem>

		<FormItem label="状态" label-position="top" prop="state">
			<Switch size="large" v-model="drawer.state">
				<template #open>
					<span>启用</span>
				</template>
				<template #close>
					<span>禁用</span>
				</template>
			</Switch>
		</FormItem>
	</Form>

	<div class="demo-drawer-footer">
		<Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
		<Button type="primary" @click="handlerForm">保存</Button>
	</div>
</template>

<script>
export default {
	props: {
		drawer: { type: Object, required: true },
	},
	data() {
		return {
			ruleValidate: {
				menus: [
					{ required: true, type: "array", min: 1, message: "菜单至少选择一个", trigger: 'change' },
				],
				funcName: [
					{ required: true, message: "功能名不允许为空", trigger: 'blur' },
					{ type: "string", max: 100, message: "功能名过长", trigger: 'blur' },
				],
				sorted: [
					{ type: "integer", message: "排序值必须是一个整数", trigger: 'blur' },
				],
				url: [
					{ required: true, message: "功能路由地址不允许为空", trigger: 'blur' },
					{ type: "string", pattern: /^\/.*$/, message: "功能路由地址必须以/开头", trigger: 'blur' },
				],
				remark: [
					{ required: true, message: "权限标识不能为空", trigger: 'blur' },
					{ type: "string", pattern: /^\w+(:\w+)*?$/, message: "权限标识格式不正确", trigger: 'blur' },
				],
				state: [
					{ type: "boolean", message: "状态必须是一个boolean类型的值", trigger: "blur" }
				]
			},
			menuList: [
				{
					id: 1,
					name: '系统管理'
				},
				{
					id: 2,
					name: '用户管理'
				},
			]
		}
	},
	emits: ["close-win"],
	methods: {
		handlerForm() {
			// 校验表单参数
			this.$refs.validForm.validate(valid => {
				if (valid) {
					if (this.drawer.id == null) {
						// 保存
						this.handlerSave();
					} else {
						// 更新
						this.handlerUpdate();
					}
				}
			})
		},
		handlerSave() {
			console.log("保存数据");
		},
		handlerUpdate() {
			console.log("修改数据");
		},
		resetValidForm() {
			this.$refs.validForm.resetFields();
		},
	}

}
</script>

<style scoped>
.icon {
	vertical-align: middle;
	margin: 0 3px;
	;
}

.demo-drawer-footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 1px solid #e8e8e8;
	padding: 10px 16px;
	text-align: right;
	background: #fff;
}
</style>